<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<!-- plugin css file  -->
<link rel="stylesheet" href="static/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="static/css/dataTables.bootstrap5.min.css">
<!-- project css file  -->
<link rel="stylesheet" href="static/css/ihealth.style.min.css">
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="logo" href="index.html"><img src="static/picture/logo.png"></a>

    <div class="login_text"><a href="login.html">LOGIN HERE</a></div>
</nav>
<div class="main px-lg-4 px-md-4">

    <div class="body d-flex py-3" id="get-age-ipfs">
        <div class="container-xxl">
            <div class="row align-items-center">
                <div class="border-0 mb-4">
                    <div class="card-header py-3 no-bg bg-transparent d-flex align-items-center px-0 justify-content-between border-bottom flex-wrap">
                        <h3 class="fw-bold mb-0">产品基本信息</h3>
                    </div>
                </div>


            </div> <!-- Row end  -->

            <div class="row mb-3" v-show="infoshow">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header py-3 d-flex justify-content-between bg-transparent border-bottom-0">
                            <h6 class="mb-0 fw-bold">原料基本信息</h6></div>
                        <div class="card-body">
                            <div id="patient-table_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6">
                                        <div class="dataTables_length" id="patient-table_length"><label>Show <select
                                                name="patient-table_length" aria-controls="patient-table"
                                                class="form-select form-select-sm">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select> entries</label></div>
                                    </div>
                                    <div class="col-sm-12 col-md-6">
                                        <div id="patient-table_filter" class="dataTables_filter">
                                            <label>Search:<input type="search" class="form-control form-control-sm"
                                                                 placeholder=""
                                                                 aria-controls="patient-table"></label></div>
                                    </div>
                                </div>
                                <div class="row">

                                    <table class="table table-hover align-middle mb-0 nowrap dataTable no-footer dtr-inline collpasd collapsed"
                                           role="grid" aria-describedby="patient-table_info"
                                           style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0" aria-controls="patient-table"
                                                rowspan="1" colspan="1"
                                                aria-label="Id : activate to sort column descending"
                                                style="width: 177.2px;" aria-sort="ascending">Id
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="patient-table"
                                                rowspan="1" colspan="1"
                                                aria-label="name : activate to sort column ascending"
                                                style="width: 200.2px;">name
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="patient-table"
                                                rowspan="1" colspan="1"
                                                aria-label="savetime : activate to sort column ascending"
                                                style="width: 200px;">savetime
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="patient-table"
                                                rowspan="1" colspan="1"
                                                aria-label="factoryname : activate to sort column ascending"
                                                style="width: 180.2px;">factoryname
                                            </th>
                                            <th class="dt-body-right sorting" tabindex="0"
                                                aria-controls="patient-table" rowspan="1" colspan="1"
                                                aria-label=" factoryaddress : activate to sort column ascending"
                                                style="width: 210.2px;"> factoryaddress
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="patient-table"
                                                rowspan="1" colspan="1"
                                                aria-label=" productiondate : activate to sort column ascending"
                                                style="width: 215.2px;"> productiondate
                                            </th>

                                        </tr>
                                        </thead>
                                        <tbody v-for="(item,index) of materinfo">


                                        <td @click="getmatinfo(index)" style="">{{item.material_id}}

                                        </td>
                                        <td>{{item.material_name}}</td>
                                        <td>{{item.savetime}}</td>
                                        <td>{{item.material_factory_name}}</td>
                                        <td>{{item.material_factory_address}}</td>
                                        <td>{{item.production_date}}</td>
                                        <tr class="child" v-show="items[index]" >
                                            <td class="child" colspan="6">
                                                <ul data-dtr-index="0" class="dtr-details">
                                                    <li data-dtr-index="6" data-dt-row="0" data-dt-column="6">
                                                        <span class="dtr-title">详细信息 </span> <span
                                                            class="dtr-data"><table
                                                            class="table table-hover align-middle mb-0"
                                                            style="width: 100%;"><tbody><tr><th scope="row"
                                                                                                style="padding-left: 200px;">原料编号</th><td
                                                            width="700px"> {{item.material_id}}</td></tr><tr><th
                                                            scope="col" style="padding-left: 200px;">原料名称</th><td
                                                            width="700px">{{item.material_name}}</td></tr><tr><th
                                                            scope="col" style="padding-left: 200px;">上传时间</th><td
                                                            width="700px"> {{item.savetime}}</td></tr><tr><th
                                                            scope="col" style="padding-left: 200px;">原料厂编号</th><td
                                                            width="700px"> {{item.material_factory_id}}</td></tr><tr><th
                                                            scope="row" style="padding-left: 200px;">原料厂名称</th><td
                                                            width="700px"> {{item.material_factory_name}}</td></tr><tr><th
                                                            scope="col" style="padding-left: 200px;">原料厂地址</th><td
                                                            width="700px"> {{item.material_factory_address}}</td></tr><tr><th
                                                            scope="col" style="padding-left: 200px;">原料厂电话</th><td
                                                            width="700px">{{item.material_factory_phone}}</td></tr><tr><th
                                                            scope="col" style="padding-left: 200px;">生产日期</th><td
                                                            width="700px">{{item.production_date}}</td></tr><tr><th
                                                            scope="col"
                                                            style="padding-left: 200px;">保密信息哈希值</th><td
                                                            width="700px"> {{item.hashID}}</td></tr><tr><th
                                                            scope="col"
                                                            style="padding-left: 200px;">保密信息IPFSCID</th><td
                                                            width="700px">{{item.encryptCID}}</td></tr><tr><th
                                                            scope="col" style="padding-left: 200px;">备注</th><td
                                                            width="700px"> {{item.remark}}</td></tr></tbody></table></span>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>



                                        </tbody>
                                    </table>

                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-5">
                                        <div class="dataTables_info" id="patient-table_info" role="status"
                                             aria-live="polite">Showing 1 to 1 of 1 entries
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-7">
                                        <div class="dataTables_paginate paging_simple_numbers"
                                             id="patient-table_paginate">
                                            <ul class="pagination">
                                                <li class="paginate_button page-item previous disabled"
                                                    id="patient-table_previous"><a href="#"
                                                                                   aria-controls="patient-table"
                                                                                   data-dt-idx="0" tabindex="0"
                                                                                   class="page-link">Previous</a>
                                                </li>
                                                <li class="paginate_button page-item active"><a href="#"
                                                                                                aria-controls="patient-table"
                                                                                                data-dt-idx="1"
                                                                                                tabindex="0"
                                                                                                class="page-link">1</a>
                                                </li>
                                                <li class="paginate_button page-item next disabled"
                                                    id="patient-table_next"><a href="#"
                                                                               aria-controls="patient-table"
                                                                               data-dt-idx="2" tabindex="0"
                                                                               class="page-link">Next</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="container-xxl" v-show="infoshow">

            <div class="row g-3 mb-3 row-deck">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header py-3 d-flex justify-content-between bg-transparent border-bottom-0">
                            <h6 class="mb-0 fw-bold ">生产商基本信息</h6>
                        </div>
                        <div class="card-body basic-custome-color pt-0">
                            <div class="table-responsive" >

                                <table class="table">
                                    <tbody>

                                    <tr>
                                        <th scope="row" style="padding-left: 200px">生产批次编号</th>
                                        <td width="700px" > {{proinfo.production_id}}</td>

                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">生产商名称</th>
                                        <td width="700px" > {{ proinfo.production_name }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">生产商编号</th>
                                        <td width="700px" >{{ proinfo.production_factory_id }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">上传时间</th>
                                        <td width="700px" > {{proinfo. savetime }}</td>
                                    </tr>

                                    <tr>
                                        <th scope="row" style="padding-left: 200px">生产商地址</th>
                                        <td width="700px" > {{proinfo.production_address}}</td>

                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">生产商电话</th>
                                        <td width="700px" > {{ proinfo.production_phone }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">生产日期</th>
                                        <td width="700px" >{{ proinfo.production_date }}</td>
                                    </tr>

                                    <tr>
                                        <th scope="col" style="padding-left: 200px">保密信息哈希值</th>
                                        <td width="700px" > {{ proinfo.hashID }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">保密信息IPFSCID</th>
                                        <td width="700px" >{{ proinfo.encryptCID }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">备注</th>
                                        <td width="700px" > {{ proinfo.remark }}</td>
                                    </tr>


                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>

                </div>
            </div><!-- .row end -->

        </div>
        <div class="container-xxl" v-show="infoshow">

            <div class="row g-3 mb-3 row-deck">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header py-3 d-flex justify-content-between bg-transparent border-bottom-0">
                            <h6 class="mb-0 fw-bold ">销售商基本信息</h6>
                        </div>
                        <div class="card-body basic-custome-color pt-0">
                            <div class="table-responsive" >

                                <table class="table">
                                    <tbody>

                                    <tr>
                                        <th scope="row" style="padding-left: 200px">产品编号</th>
                                        <td width="700px" > {{product_id}}</td>

                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">经销商编号</th>
                                        <td width="700px" > {{ agency_id }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">经销商编号</th>
                                        <td width="700px" >{{ agency_name }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">经销商地址</th>
                                        <td width="700px" > {{ agency_address }}</td>
                                    </tr>

                                    <tr>
                                        <th scope="row" style="padding-left: 200px">经销商电话</th>
                                        <td width="700px" > {{agency_phone}}</td>

                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">进货时间</th>
                                        <td width="700px" > {{ savetime }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">保密信息哈希值</th>
                                        <td width="700px" >{{ agency_hash }}</td>
                                    </tr>

                                    <tr>
                                        <th scope="col" style="padding-left: 200px">保密信息IPFSCID</th>
                                        <td width="700px" > {{ encryptCID }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="col" style="padding-left: 200px">备注</th>
                                        <td width="700px" >{{ remark }}</td>
                                    </tr>



                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>

                </div>
            </div><!-- .row end -->

        </div>
    </div>




</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="static/js/jquery.min.js"></script>

<script type="text/javascript">
    // $(document).ready(function (){
    //     alert(getQueryVariable("agencyid"))
    // })
    /**
     * 获取url路径上的参数
     * @param variable
     * @returns {*}
     */
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    const Upmatencryinfo = {
        data() {
            return {
                agencyid: '', //查询id

                materinfo: [],
                proinfo:{},
                product_id: '',
                agency_id: '',
                agency_name: '',
                agency_address: '',
                agency_phone: '',
                savetime: '',
                agency_hash: '',
                encryptCID: '',
                remark: '',

                items:[],//索引数组
                infoshow: false,
            }

        },
        methods: {

            getageipfsinfo() {

                axios.get('http://localhost:9000/api/age/getageipfsinfo', {
                    params: {
                        productid: this.agencyid
                    }
                })
                    .then((response) => {
                        // 处理成功情况
                        if (response.data.code === 200) {
                            this.infoshow = true
                            this.materinfo = response.data.data.ipfsInfo.proinfo.materinfo
                            for(let i=0;i<this.materinfo.length;i++){
                                this.items[i]=false
                            }
                            this.proinfo=response.data.data.ipfsInfo.proinfo
                            this.product_id = response.data.data.ipfsInfo.product_id
                            this.agency_id = response.data.data.ipfsInfo.agency_id
                            this.agency_name = response.data.data.ipfsInfo.agency_name
                            this.agency_address = response.data.data.ipfsInfo.agency_address
                            this.agency_phone = response.data.data.ipfsInfo.agency_phone
                            this.savetime = response.data.data.ipfsInfo.savetime
                            this.agency_hash = response.data.data.ipfsInfo.hashID
                            this.encryptCID = response.data.data.ipfsInfo.encryptCID
                            this.remark = response.data.data.ipfsInfo.remark
                            console.log(response.data.data);
                        } else (console.log(response))

                    })
                    .catch(function (error) {
                        // 处理错误情况
                        console.log(error);
                    })
            },
            getmatinfo(index){

                for(let i=0;i<this.materinfo.length;i++){
                    if(i==index){
                        this.items[i]=!this.items[index]
                    }else{
                        this.items[i]=false
                    }
                }
            }
        },
        mounted:function () {   //自动触发写入的函数
            this.agencyid=getQueryVariable("agencyid"),
            this.getageipfsinfo();
        }
    }


    Vue.createApp(Upmatencryinfo).mount('#get-age-ipfs')
</script>
</body>
</html>